/*
 * @Descripttion: kg-ui
 * @Author: pujianguo
 * @Date: 2021-03-11 09:17:11
 */

// iphoneX底部空白
.kg-iphonex-margin-bottom{
  margin-bottom: 48rpx;
}

// 底部按钮组
.kg-footer-btn-wrapper{
  padding: 20rpx 30rpx;
  width: 100%;
  @include flex-center();
	.kg-footer-btn {
    flex: 1;
		margin: 0 30rpx;
	}
}
// 按钮去掉边框
.kg-btn-no-border{
  border: none;
  &::after{
    border: none;
  }
}

// 分割线
.kg-line-divider{
  height: 1rpx;
  width: 100%;
  background-color: $uni-border-color;
}
// 含有文字的分割线
.kg-line-text{
  width: 100%;
  @include flex-center();
  &::before{
    content: ' ';
    height: 1px;
    background: $uni-border-color-dark;
    flex: 1;
    margin-left: 40rpx;
  }
  &::after{
    content: ' ';
    height: 1px;
    background: $uni-border-color-dark;
    flex: 1;
    margin-right: 40rpx;
  }
  text{
    padding: 0 30rpx;
  }
}

// icon-size
.kg-icon-size-sm{
  font-size: 24rpx;
  width: 24rpx;
  height: 24rpx;
}
.kg-icon-size{
  font-size: 32rpx;
  width: 32rpx;
  height: 32rpx;
}
.kg-icon-size-lg{
  font-size: 48rpx;
  width: 48rpx;
  height: 48rpx;
}

// flex
.kg-flex-center{
  @include flex-center();
}

// 右侧箭头
.kg-access{
  position: relative;
  padding-right: 60rpx;
  &::after{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 15px;
    height: 6px;
    width: 6px;
    border-width: 1px 1px 0 0;
    border-color: $uni-text-color-grey;
    border-style: solid;
    margin-top: -3px;
    transform: rotate(45deg);
  }
}

/* *************** panel *************** */
.kg-panel{
  border-bottom: 1rpx solid $uni-border-color;
  .kg-panel-hd{
    padding: 15rpx 20rpx;
    line-height: 2em;
    display: flex;
    align-items: center;
    .kg-panel-hd-flag{
      width: 8rpx;
      height: 32rpx;
      margin-right: 16rpx;
      background-color: $uni-color-primary;
      border-radius: 4rpx;
    }
    .kg-panel-hd-title{
      flex: 1;
      .kg-panel-hd-title-text{
        display: inline-block;
        vertical-align: middle;
        margin-right: 20rpx;
      }
      .kg-panel-hd-title-desc{
        display: inline-block;
        vertical-align: middle;
        line-height: 1.4;
				font-size: $uni-font-size-sm;
        color: $uni-color-subtitle;
      }
    }
    .kg-panel-hd-icon{
    }
  }
  .kg-panel-bd{
  }
  .kg-panel-ft{
    font-size: 30rpx;
		padding: 30rpx 30rpx;
		background-color: $uni-bg-color;
    @include flex-between();
    border-top: 1rpx solid $uni-border-color;
		.kg-panel-ft-hd{
		}
		.kg-panel-ft-bd{
		}
		.kg-panel-ft-ft{
		}
  }
}


/* *************** cell *************** */
.kg-cell-box{
  .kg-cells-title{
    color: $uni-color-title;
    line-height: 50rpx;
    padding-left: 20rpx;
  }
  .kg-cells-title + .kg-cells{
    margin-top: 0;
  }

  .kg-cells{
    background: $uni-bg-color;
    margin-top: 20rpx;
    &:first-of-type{
      margin-top: 0;
    }
    .kg-cell{
      display: flex;
      align-items: center;
      min-height: 2em;
      line-height: 2em;
      padding-left: 30rpx;
      .kg-cell-icon{
        width: 18px;
        height: 18px;
        font-size: 18px;
        margin-right: 10px;
      }
      .kg-cell-image{
        width: 2em;
        height: 2em;
        margin-right: 10px;
      }
      .kg-cell-content{
        flex: 1;
        @include flex-between();
        border-bottom: 1rpx solid $uni-border-color;
        padding: 20rpx 20rpx 20rpx 0;
        overflow: hidden;
        &-hd{
          width: 2em;
          height: 2em;
          margin-right: 20rpx;
        }
        &-bd{
          &-title{
            line-height: 40rpx;
            padding-right: 40rpx;
          }
          &-desc{
            padding-right: 40rpx;
            color: $uni-text-color-placeholder;
            line-height: 30rpx;
            font-size: $uni-font-size-sm;
            margin-top: 8rpx;
          }
        }
        &-ft{
          color: $uni-text-color-placeholder;
          font-size: $uni-font-size-sm;
          line-height: 1;
        }
      }
      &_access{
        .kg-cell-content{
          position: relative;
          padding-right: 60rpx;
          &:before{
            content: " ";
            display: inline-block;
            top: 50%;
            right: 15px;
            height: 6px;
            width: 6px;
            border-width: 1px 1px 0 0;
            border-color: $uni-text-color-grey;
            border-style: solid;
            position: absolute;
            margin-top: -3px;
            transform: rotate(45deg);
          }
        }
      }
      &:last-child{
        .kg-cell-content{
          border: 0;
        }
      }
      &:active{
        background: $uni-bg-color-hover;
      }
    }
    .kg-cell_active{
      background: $uni-bg-color-hover;
    }
    .kg-cell_flex-start{
      align-items: flex-start;
      .kg-cell-icon{
        padding: 20rpx 0;
        font-size: inherit;
        height: 2em;
        box-sizing: content-box;
        @include flex-center();
        .iconfont{
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
      .kg-cell-content{
        min-height: 2em;
        box-sizing: content-box;
        .kg-cell-content-bd{
          @include flex-center();
          padding-right: 40rpx;
          word-break: break-all;
        }
      }
      .kg-cell-icon_access{
        position: relative;
        margin-right: 0;
        &:before{
          content: " ";
          display: inline-block;
          top: 50%;
          right: 15px;
          height: 6px;
          width: 6px;
          border-width: 1px 1px 0 0;
          border-color: $uni-text-color-grey;
          border-style: solid;
          position: absolute;
          margin-top: -3px;
          transform: rotate(45deg);
        }
      }
    }
  }
}
// 深色下划线（背景为page颜色时使用）
.kg-cell-box_border-dark{
  .kg-cell .kg-cell-content{
    border-color: $uni-border-color-dark !important;
  }
}

/* *************** form *************** */
.kg-form {
  $line-height: 2em;
  padding: 15rpx 0 15rpx 30rpx;
  .kg-form-title{
  }
  .kg-form-cell{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid $uni-border-color;
    padding: 20rpx 20rpx 20rpx 0;
    line-height: $line-height;
    min-height: $line-height;
    &:last-child{
      border-bottom: 0;
    }
    .kg-form-cell-icon{
      width: $line-height;
      height: $line-height;
      @include flex-center();
      margin-right: 10px;
      .iconfont{
        width: 18px;
        height: 18px;
        font-size: 18px;
        @include flex-center();
      }
    }
    .kg-form-cell-label{
      line-height: $line-height;
      width: 180rpx;
      margin-right: 20rpx;
    }
    .kg-form-cell-content {
      flex: 1;
      display: flex;
      align-items: center;
      .kg-form-input {
        min-height: $line-height;
        line-height: $line-height;
        flex: 1;
        color: $uni-color-title;
      }
      .kg-form-text{
        min-height: $line-height;
        line-height: $line-height;
        flex: 1;
        color: $uni-color-subtitle;
      }
      .kg-form-textarea{
        flex: 1;
        width: auto;
        min-height: 3.4em;
        padding: 0.3em 0;
        line-height: 1.4em;
        color: $uni-color-title;
      }
      .kg-form-switch{
        height: $line-height;
      }
      .kg-form-picker{
        flex: 1;
        color: $uni-color-title;
        .kg-form-picker-text{
          position: relative;
          padding-right: 30px;
          min-height: $line-height;
          line-height: $line-height;
        }
        .kg-form-picker-text::after{
          content: "";
          display: inline-block;
          height: 6px;
          width: 6px;
          border-width: 1px 1px 0 0;
          border-color: $uni-text-color-grey;
          border-style: solid;
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          position: absolute;
          top: -2px;
          top: 50%;
          right: 15px;
          margin-top: -4px;
        }
      }
      .kg-form-check-group{ // 包含radio, checkbox
        min-height: $line-height;
        line-height: $line-height;
        flex: 1;
        color: $uni-color-title;
        display: flex;
        flex-wrap: wrap;
        .kg-form-check-group-item{
          margin-right: 20rpx;
          display: flex;
          .kg-form-check-group-item-check{
          }
          .kg-form-check-group-item-label{
          }
        }
      }
    }
    .kg-form-cell-item{
      height: $line-height;
      line-height: $line-height;
      font-size: $uni-font-size-base;
    }
    .kg-form-cell-unit{
      width: 36px;
      text-align: center;
      margin-right: 0px;
    }
  }
  // 有多行内容的行，如textarea,radio-group, checkbox
  .kg-form-cell_label-top{
    align-items: flex-start;
    .kg-form-cell-content{
      min-height: $line-height;
    }
  }
  .kg-form-cell__label{ // 只有标题
    color: $uni-color-subtitle;
    padding: 15rpx 20rpx 15rpx 0;
    line-height: $line-height;
    min-height: $line-height;
    .kg-form-cell__label-title{
      display: inline-block;
      vertical-align: middle;
    }
    .kg-form-cell__label-desc{
      display: inline-block;
      vertical-align: middle;
      min-height: 1.4em;
      line-height: 1.4em;
      margin-left: 20rpx;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }
  .kg-form-cell__image{
    padding-bottom: 20rpx;
    padding-right: 20rpx;
    border-bottom: 1rpx solid $uni-border-color;
  }

  .kg-form-cell__obey{ // 服从条款勾选框
    border-bottom: 1rpx solid $uni-border-color;
    padding: 15rpx 20rpx 15rpx 0;
    label{
      width: 100%;
    }
    switch{
      display: inline-block;
      vertical-align: middle;
      line-height: $line-height;
    }
    .kg-form-cell__obey-title{
      color: $uni-color-primary;
      vertical-align: middle;
      display: inline-block;
      min-height: $line-height;
      line-height: $line-height;
      margin-right: 20rpx;
    }
    .kg-form-cell__obey-desc{
      color: $uni-color-subtitle;
      display: inline-block;
      vertical-align: middle;
      line-height: 1.4em;
      font-size: $uni-font-size-sm;
    }
  }

  // 必选标识
  .kg-form-cell_required {
    position: relative;
    &:before {
      content: "*";
      position: absolute;
      left: -18rpx;
      margin-top: 5rpx;
      text-align: center;
      color: $uni-color-error;
    }
  }
}
.kg-form_cell-no-border{
  .kg-form-cell, .kg-form-cell__image{
    border-bottom: 0;
  }
}
// form value 向右对齐
.kg-form_value-right{
  .kg-form-cell{
    .kg-form-cell-label{
      width: auto;
    }
    .kg-form-cell-content{
      .kg-form-picker{
        text-align: right;
      }
      .kg-form-input, .kg-form-text, .kg-form-item, .kg-form-switch {
        text-align: right;
        margin-right: 12px;
      }
      .kg-form-radio-group{
        justify-content: flex-end;
      }
    }
  }
}

// 上传图片
.kg-uploader-image{
  display: flex;
  flex-wrap: wrap;
  &-item{
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    background-color: $uni-bg-color-grey;
    &:nth-child(4n+0){
      margin-right: 0;
    }
    &-img{
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    &-delete {
      display: block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: -8px;
      top: -8px;
      // color: $uni-text-color-grey;
      background-color: $uni-bg-color;
      border-radius: 10px;
      @include flex-center();
      .uni-icons{
        color: $uni-text-color-grey !important;
      }
    }
  }
  &-item_input{
    @include flex-center();
    border-radius: 16rpx;
    .uni-icons{
      color: $uni-text-color-grey !important;
    }
    &:active{
      border-color: $uni-text-color-grey;
      .uni-icons{
        font-weight: bold;
      }
    }
  }
  .kg-uploader-image_one-file-item{
    @include flex-center(column);
    margin-bottom: 20rpx;
    .kg-uploader-image-item{
      margin-bottom: 10rpx;
    }
    .kg-uploader-image_one-file-item-title{
      width: 180rpx;
      padding: 0 30rpx 10rpx 10rpx;
      text-align: center;
    }
  }
}

.kg-full{
  width: 100%;
  height: 100%;
}
